<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      @close="closeVideo"
    >
      <div class="container">
        <vue3VideoPlay v-bind="options"/>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import {
  reactive, defineProps, withDefaults, getCurrentInstance, defineExpose, ref,
} from 'vue';

interface Props {
  title?: string,
  url: string,
  poster: string,
  width?: string,
  height?: string,
}
const { proxy } = getCurrentInstance();
const props = withDefaults(defineProps<Props>(), {
  url: '',
  width: '800px',
  height: '450px',
  title: '视频播放',
  color: '#409eff',
});
const options = reactive({
  width: props.width, // 播放器高度
  height: props.height, // 播放器高度
  color: props.color, // 主题色
  title: props.title, // 视频名称
  src: props.url, // 视频源
  poster: props.poster, // 视频封面
  muted: false, // 静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], // 播放倍速
  autoPlay: false, // 自动播放
  loop: false, // 循环播放
  mirror: false, // 镜像画面
  ligthOff: false, // 关灯模式
  volume: 0.3, // 默认音量大小
  control: true, // 是否显示控制
  controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'], // 显示所有按钮,
});
const dialogVisible = ref(false);

const openDia = (url:string) => {
  options.src = url;
  options.autoPlay = false;
  dialogVisible.value = true;
};

const closeVideo = () => {
  options.autoPlay = false;
  options.src = '';
};

defineExpose({
  openDia,
});
</script>

<style scoped>
.container {
  width: auto;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
